<template>
  <div>
    <el-tabs v-model="stepActive" stretch>
      <el-tab-pane label="报名信息" name="1" />
      <el-tab-pane label="个人信息" name="2" />
      <el-tab-pane label="申请材料" name="3" />
      <!-- <el-tab-pane label="审批进度" name="4" /> -->
    </el-tabs>
    <div v-if="stepActive == '1'">
      <div class="main-container">
        <div class="header-title">选送单位</div>
        <el-descriptions
          :label-style="labelStyle"
          :content-style="contentStyle"
          border
        >
          <el-descriptions-item label="原单位/医院名称">{{
            form.unitHospitalName
          }}</el-descriptions-item>
          <el-descriptions-item label="申请人姓名">{{
            form.applicantName
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="main-container">
        <div class="header-title">进修科目</div>
        <el-descriptions
          :label-style="labelStyle"
          :content-style="contentStyle"
          border
          :column="2"
        >
          <el-descriptions-item label="进修科目">{{
            form.registerDeptName
          }}</el-descriptions-item>
          <el-descriptions-item label="进修批次">{{
            form.batchName
          }}</el-descriptions-item>
          <el-descriptions-item label="进修形式">{{
            form.educationType
          }}</el-descriptions-item>
          <el-descriptions-item label="进修期限">{{
            form.durationName
          }}</el-descriptions-item>
          <el-descriptions-item label="进修时间"
            >{{ form.durationStartDate }} - {{ form.durationEndDate }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="main-container" v-if="form.joinMicrosutureTrain == 1">
        <div class="header-title">显微血管缝合操作培训</div>
        <el-descriptions
          :label-style="labelStyle"
          :content-style="contentStyle"
          border
        >
          <el-descriptions-item label="显微血管缝合操作培训"
            >参加培训</el-descriptions-item
          >
          <el-descriptions-item label="培训费用">2800</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="main-container">
        <div class="header-title">进修要求与目的</div>
        <pre class="textarea-container">{{ form.educationAskObjective }}</pre>
      </div>
    </div>
    <div v-if="stepActive == '2'">
      <div class="main-container">
        <div class="header-title">个人信息</div>
        <el-descriptions
          :label-style="labelStyle"
          :content-style="contentStyle"
          border
          :column="2"
        >
          <el-descriptions-item label="姓名">{{
            form.userName
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            ["", "男", "女"][form.gender]
          }}</el-descriptions-item>
          <el-descriptions-item label="民族">{{
            form.nation
          }}</el-descriptions-item>
          <el-descriptions-item label="从事专业">{{
            form.profession
          }}</el-descriptions-item>
          <el-descriptions-item label="政治面貌">{{
            form.politicalOutlook
          }}</el-descriptions-item>
          <el-descriptions-item label="健康状况">{{
            form.healthCondition
          }}</el-descriptions-item>
          <el-descriptions-item label="职称">{{
            form.technicalTitle
          }}</el-descriptions-item>
          <el-descriptions-item label="职务">{{
            form.duties
          }}</el-descriptions-item>
          <el-descriptions-item label="证件类型">{{
            form.idCardType
          }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{
            form.idCard
          }}</el-descriptions-item>
          <el-descriptions-item label="出生日期">{{
            form.birthday
          }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{
            form.age
          }}</el-descriptions-item>
          <el-descriptions-item label="最高学历">{{
            form.highestDegree
          }}</el-descriptions-item>
          <el-descriptions-item label="毕业院校">{{
            form.graduateSchool
          }}</el-descriptions-item>
          <el-descriptions-item label="何时参加工作">{{
            form.startWorking
          }}</el-descriptions-item>
          <el-descriptions-item label="何时获得职业资格证书">{{
            form.doctorCertificateDate
          }}</el-descriptions-item>
          <el-descriptions-item label="资格证书编号">{{
            form.doctorCertificateNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="执业证书编号">{{
            form.practicingCertificateNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="操作设备的名称">{{
            form.operatingDevice
          }}</el-descriptions-item>
          <el-descriptions-item label="是否从事放射诊疗技术岗位"
            >{{ ["", "是", "否"][form.engagedRadiatePost] }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="main-container">
        <div class="header-title">联系方式</div>
        <el-descriptions
          :label-style="labelStyle"
          :content-style="contentStyle"
          border
          :column="2"
        >
          <el-descriptions-item label="手机号码">{{
            form.phoneNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{
            form.email
          }}</el-descriptions-item>
          <el-descriptions-item label="单位电话">{{
            form.workTelephone
          }}</el-descriptions-item>
          <el-descriptions-item label="邮编">{{
            form.zipCode
          }}</el-descriptions-item>
          <el-descriptions-item label="单位等级">{{
            form.unitLevel
          }}</el-descriptions-item>
          <el-descriptions-item label="医院级别">{{
            form.hospitalLevel
          }}</el-descriptions-item>
          <el-descriptions-item label="单位名称">{{
            form.unitName
          }}</el-descriptions-item>
          <el-descriptions-item label="单位地址"
            >{{ form.unitProvince }}{{ form.unitCity }}{{ form.unitDistrict
            }}{{ form.unitAddress }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="main-container">
        <div class="header-title">政治表现</div>
        <div class="textarea-container">{{ form.politicalRepresentation }}</div>
      </div>
      <div class="main-container">
        <div class="header-title">拟进修专业方面的工作基础</div>
        <div class="textarea-container">{{ form.proposedMajor }}</div>
      </div>
      <div class="main-container" style="text-align: center">
        <div class="header-title">学习经历（从大学起）</div>
        <el-table :data="form.registerLearnVoList">
          <el-table-column label="开始时间" align="center" prop="startDate" />
          <el-table-column label="结束时间" align="center" prop="endDate" />
          <el-table-column label="学校名称" align="center" prop="schoolName" />
          <el-table-column
            label="院系名称"
            align="center"
            prop="professionName"
          />
          <el-table-column
            label="专业名称"
            align="center"
            prop="designationName"
          />
          <el-table-column label="学历" align="center" prop="education" />
          <el-table-column label="学位" align="center" prop="academicDegree" />
        </el-table>
      </div>
      <div class="main-container" style="text-align: center">
        <div class="header-title">工作经历</div>
        <el-table :data="form.registerWorkVoList">
          <el-table-column label="开始时间" align="center" prop="startDate" />
          <el-table-column label="结束时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.endDate ? scope.row.endDate : "至今" }}
            </template>
          </el-table-column>
          <el-table-column label="医院级别" align="center" prop="hospitalLevel"
            >>
            <template slot-scope="scope">
              {{ scope.row.hospitalLevel }}{{ scope.row.hospitalTwoLevel }}
            </template>
          </el-table-column>
          <el-table-column
            label="单位名称"
            align="center"
            prop="hospitalName"
          />
          <el-table-column label="科室名称" align="center" prop="deptName" />
          <el-table-column label="职称" align="center" prop="technicalTitle" />
          <el-table-column label="职务" align="center" prop="duties" />
        </el-table>
      </div>
      <div class="main-container" style="text-align: center">
        <div class="header-title">外语水平</div>
        <el-table :data="form.registerLanguageVoList">
          <el-table-column label="外语语种" align="center" prop="languages" />
          <el-table-column label="读写能力" align="center" prop="literacy" />
          <el-table-column
            label="听说能力"
            align="center"
            prop="listenAndSpeak"
          />
        </el-table>
      </div>
    </div>
    <div v-if="stepActive == '3'">
      <div class="main-container image-box">
        <div class="header-title">
          <div>进修申请表</div>
          <div class="desc">
            （<span class="red">要求</span
            >：请下载本批次进修申请表模板，由医院管理部门签字盖章后拍照上传）
          </div>
          <div class="download" @click="downloadApplyTemplate">
            申请表模板下载
          </div>
        </div>
        <div>
          <div
            v-for="(item, index) in (form.registerApplicationForm || '').split(
              ','
            )"
            :key="index"
            :data-src="baseURL + item"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
        </div>
      </div>
      <div class="main-container image-box">
        <div class="header-title">
          <div>毕业证书</div>
          <div class="desc">
            （<span class="red">要求</span>：请将毕业证书原件拍照后上传）
          </div>
        </div>
        <div style="display: flex">
          <div
            v-for="(item, index) in (form.diploma || '').split(',')"
            :key="index"
            :data-src="baseURL + item"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
        </div>
      </div>
      <div class="main-container image-box">
        <div class="header-title">
          <div>医疗机构等级图片</div>
          <div class="desc">
            （<span class="red">要求</span
            >：请上传医疗机构等级查询结果图片，查询网址：
          </div>
          <a
            class="download"
            target="_blank"
            href="https://zgcx.nhc.gov.cn/unit"
            >https://zgcx.nhc.gov.cn/unit</a
          >
          <div class="desc">)</div>
        </div>
        <div style="display: flex">
          <div
            v-for="(item, index) in (form.medicalInstitutionLevel || '').split(
              ','
            )"
            :key="index"
            :data-src="baseURL + item"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
        </div>
      </div>
      <div class="main-container image-box">
        <div class="header-title">
          <div>资格证书</div>
          <div class="desc">
            （<span class="red">要求</span>：请完整上传资格证书）
          </div>
        </div>
        <div style="display: flex">
          <div
            v-for="(item, index) in (form.qualification || '').split(',')"
            :key="index"
            :data-src="baseURL + item"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
        </div>
      </div>
      <div class="main-container image-box">
        <div class="header-title">
          <div>执业证书</div>
          <div class="desc">
            （<span class="red">要求</span>：请完整上传执业证书）
          </div>
        </div>
        <div style="display: flex">
          <div
            v-for="(item, index) in (form.practicingCertificate || '').split(
              ','
            )"
            :key="index"
            :data-src="baseURL + item"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
        </div>
      </div>
      <div class="main-container image-box">
        <div class="header-title">
          <div>执业注册信息查询结果</div>
        </div>
        <div style="font-size: 16px; margin-bottom: 15px">
          （<span style="color: #a52529">要求</span>： 医生执业注册查询：
          <a
            target="_blank"
            href="https://zgcx.nhc.gov.cn/doctor"
            style="color: #409eff"
            >https://zgcx.nhc.gov.cn/doctor</a
          >； 护士执业注册查询：
          <a
            target="_blank"
            href="https://zgcx.nhc.gov.cn/nurse"
            style="color: #409eff"
            >https://zgcx.nhc.gov.cn/nurse</a
          >）
        </div>
        <div style="display: flex">
          <div
            v-for="(item, index) in (form.practiceResult || '').split(',')"
            :key="index"
            :data-src="baseURL + item"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
              @error="handleImageError($event, baseURL + item, index)"
            />
          </div>
        </div>
      </div>
      <div class="main-container image-box">
        <div class="header-title">
          <div>职称证书</div>
          <div class="desc">
            （<span class="red">要求</span
            >：请上传职称证书图片，若无证书请上传空白图片）
          </div>
        </div>
        <div style="display: flex">
          <div
            v-for="(item, index) in (
              form.professionalTitleCertificate || ''
            ).split(',')"
            :key="index"
            :data-src="baseURL + item"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
        </div>
      </div>
      <div class="main-container image-box">
        <div class="header-title">
          <div>身份证</div>
          <div class="desc">
            （<span class="red">要求</span>：请上传身份证的正、反面）
          </div>
        </div>
        <div style="display: flex">
          <div
            v-for="(item, index) in (form.idCardFront || '').split(',')"
            :data-src="baseURL + item"
            :key="index"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
          <div
            v-for="(item, index) in (form.idCardBack || '').split(',')"
            :data-src="baseURL + item"
            :key="index"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
        </div>
      </div>
      <div class="main-container image-box">
        <div class="header-title">
          <div>电子证件照</div>
          <div class="desc">
            （<span class="red">要求</span
            >：请上传一寸或二寸免冠（不戴帽子）正面照，格式：jpg、jpeg、png，图片大小不超过2M）
          </div>
        </div>
        <div style="display: flex">
          <div
            v-for="(item, index) in (form.electronicIdPhoto || '').split(',')"
            :key="index"
            :data-src="baseURL + item"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
        </div>
      </div>
      <div class="main-container image-box">
        <div class="header-title">
          <div>其他补充附件</div>
        </div>
        <div style="display: flex">
          <div
            v-for="(item, index) in (form.otherAttachment || '').split(',')"
            :key="index"
            :data-src="baseURL + item"
          >
            <el-image
              class="image-container"
              :src="baseURL + item"
              :preview-src-list="[baseURL + item]"
            />
          </div>
        </div>
      </div>
    </div>
    <div v-if="stepActive == '4'">
      <div class="main-container">
        <div class="header-title">审批进度</div>
        <el-timeline>
          <el-timeline-item v-for="item in auditLogVoList" :key="item.id">
            <div slot="dot" class="dot">{{ item.sort }}</div>
            <div class="time-container">
              <div>
                <span>{{ item.typeName }}</span>
                <el-tag effect="dark" size="mini">{{
                  item.auditStatus
                }}</el-tag>
              </div>
              <div>
                操作人：{{
                  item.auditUserName ? item.auditUserName : form.applicantName
                }}
              </div>
              <div v-if="item.remark">审批建议：{{ item.remark }}</div>

              <div>
                提交时间：{{
                  parseTime(item.createTime, "{yyyy}/{mm}/{dd} {hh}:{ii}:{ss}")
                }}
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import { consts } from "@/api/business/consts";
import { getAuditLog, getRegisterInfo } from "@/api/business/registerInfo";

import { parseTime } from "@/utils/ruoyi";

export default {
  props: {
    registerId: null,
    stepActive: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      form: {},
      batchList: [],
      batchNameList: [],
      durationList: [],
      durationNameList: [],
      durationDateList: [],
      consts: consts,
      labelStyle: {
        width: "150px",
      },
      contentStyle: {
        width: "350px",
      },
      auditLogVoList: [], // 审批记录
    };
  },
  watch: {
    registerId: {
      immediate: true,
      handler() {
        this.getInfo();
        this.getAuditLog();
      },
    },
  },
  methods: {
    parseTime,
    getInfo() {
      getRegisterInfo(this.registerId).then((response) => {
        this.form = response.data;
      });
    },
    //获取审批记录
    getAuditLog() {
      getAuditLog(this.registerId).then((response) => {
        const mergedLogs = [
          ...response.data.graduationLog,
          ...response.data.registerLog,
        ];

        this.auditLogVoList = mergedLogs.map((item, index) => {
          item.sort = mergedLogs.length - index; // Starting from the total length and counting down
          return item;
        });
      });
    },
    // 下载申请表模板
    downloadApplyTemplate() {
      console.log(this.baseURL);
      // console.log(this.baseUrl + '/business/registerPerson/downloadApplyTemplate?id=' + this.form.id)
      this.$loading({
        lock: true,
        text: "下载中,请稍等",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)",
      });

      fetch(
        this.baseURL +
          "/business/registerPerson/downloadApplyTemplate?id=" +
          this.form.id
      )
        .then((response) => response.blob())
        .then((blob) => {
          const a = document.createElement("a");
          const objectUrl = URL.createObjectURL(blob);
          a.href = objectUrl;
          a.download = "进修申请表.pdf";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(objectUrl);
        })
        .finally(() => {
          this.$loading().close();
        });
      // window.location.href =
      //   this.baseURL +
      //   "/business/registerPerson/downloadApplyTemplate?id=" +
      //   this.form.id;
    },
  },
};
</script>
<style lang="scss" scoped>
.textarea-container {
  font-family: "Microsoft YaHei";
  white-space: pre-line;
  height: 200px;
  padding: 15px;
  border: 1px solid #f2f3f5;
  border-radius: 10px;
  overflow-y: auto;
}

.image-container {
  width: 150px;
  height: 150px;
  border: 1px solid #f2f3f5;
  border-radius: 10px;
  margin-right: 15px;
}

::v-deep .el-tabs__item {
  font-size: 18px;
  font-weight: bolder;
}

.time-container {
  line-height: 25px;

  .el-tag {
    margin-left: 10px;
  }
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #a52529;
  color: white;
  text-align: center;
  line-height: 20px;
  margin-left: -5px;
}

.main-container {
  width: 1000px;
  margin-left: calc((100% - 1000px) / 2);
  margin-bottom: 15px;
  padding: 15px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 5px 5px 10px 0 rgba(157, 156, 156, 0.1);
}

.header-title {
  background-color: #f2f3f5;
  height: 50px;
  line-height: 50px;
  font-weight: bolder;
  font-size: 18px;
  padding-left: 15px;
  border-left: 6px solid #a52529;
  border-radius: 5px;
  margin-bottom: 15px;
  display: flex;

  .desc {
    font-size: 16px;
    font-weight: normal;

    .red {
      color: #a52529;
    }
  }

  .download {
    color: #409eff;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
  }
}

.image-box {
  padding-bottom: 10px;
}
</style>
